<style lang="less">
    @import './index.less';
</style>

<template>
    <div ref="pageContent">
        <Row :gutter="10">
            <i-col span="6">
                <div class="page-content" style="height: 100%;">
                    <Row style="height: 24px;line-height: 24px;margin-bottom: 10px;">
                        <i-col>
                            <Input v-model="searchKey" placeholder="关键字" style="width: 100px;" size="small"/>
                            <Button type="primary" size="small">
                                <Icon type="search"/>
                                查询
                            </Button>
                            <Button type="primary" size="small" class="pull-right" @click="addModal=!addModal">
                                <Icon type="plus"/>
                                增加
                            </Button>
                            <Dropdown style="margin-right: 10px" v-show="selection.length" trigger="click"
                                      class="pull-right">
                                <Button type="default" size="small">
                                    批次执行...
                                    <Icon type="arrow-down-b"></Icon>
                                </Button>
                                <DropdownMenu slot="list">
                                    <DropdownItem>
                                        <Icon type="close"/>
                                        删除
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </i-col>
                    </Row>
                    <Table border
                           :context="self"
                           :loading="tableLoading"
                           :columns="tableColumn"
                           :data="tableData"
                           highlight-row
                           @on-current-change="tableCurrentChange"
                           :height="tableHeight">

                    </Table>
                </div>
            </i-col>

            <i-col span="18">
                <div class="page-content">
                    <Row style="height: 24px;line-height: 24px;" v-show="currentRow.roleId">
                        <i-col>
                            <span class="page-content-title">角色名:{{currentRow.roleName}}</span>

                            <Button type="error" size="small" class="pull-right" @click="deleteRole"
                                    style="margin-left:10px">
                                删除角色
                            </Button>
                            <Button type="primary" size="small" class="pull-right" @click="saveRole">
                                保存权限
                            </Button>
                            <Dropdown style="margin-right: 10px" v-show="selection.length" trigger="click"
                                      class="pull-right">
                                <Button type="default" size="small">
                                    批次执行...
                                    <Icon type="arrow-down-b"></Icon>
                                </Button>
                                <DropdownMenu slot="list">
                                    <DropdownItem>
                                        <Icon type="close"/>
                                        删除
                                    </DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </i-col>
                    </Row>
                </div>
                <Collapse v-show="currentRow.roleId">
                    <Panel name="1">
                        菜单权限
                        <Card slot="content" v-for="app in currentAuth.page" :key="app.appId">
                            <p slot="title">
                                <Icon type="ios-film-outline"></Icon>
                                {{app.appDesc}}
                            </p>
                            <Row  style="padding: 10px;">
                                <i-col v-for="page in app.pages" span="6" :key="app.pageTitle">
                                    <span style="display: block;">{{page.pageTitle}}页面</span>
                                    <Checkbox v-model="control.permit" style="display: block"
                                              v-for="control in page.controls"
                                              :key="app.appId+page.pageName+control.controlName">{{control.controlLabel}}
                                    </Checkbox>
                                </i-col>
                            </Row>
                        </Card>
                    </Panel>
                    <Panel name="2">
                        资源权限
                        <Card slot="content" v-for="resource in currentAuth.resource" :key="resource.resourceId">
                            <p slot="title">
                                <Icon type="ios-film-outline"></Icon>
                                {{resource.resourceDesc}}
                            </p>
                            <Row style="padding: 10px;">
                                <i-col style="margin-bottom: 10px" v-for="endpoint in resource.endpoints" span="6" :key="endpoint.endpointPath+endpoint.endpointMethod">
                                    <span style="display: block;" class="text-limit">{{endpoint.endpointDesc}}</span>
                                    <span style="display: block;" class="text-limit">{{endpoint.endpointMethod}} /{{resource.resourceName}}{{endpoint.endpointPath}}</span>

                                    <i-switch v-model="endpoint.permit" size="large">
                                        <span slot="open">允许</span>
                                        <span slot="close">拒绝</span>
                                    </i-switch>
                                </i-col>
                            </Row>
                        </Card>
                    </Panel>
                    <Panel name="3">
                        数据权限
                        <Card slot="content">
                            <p slot="title">
                                <Icon type="ios-film-outline"></Icon>
                                sys-app
                            </p>
                            <div class="page-content">
                                content
                            </div>
                        </Card>
                    </Panel>
                </Collapse>
            </i-col>
        </Row>
        <Modal
                title="增加"
                v-model="addModal"
                @on-ok="addSave"
                @on-cancel="addCancel"
                :loading="true"
                :mask-closable="false">
            <Form ref="formValidate" :label-width="90">
                <Row>
                    <i-col>
                        <FormItem label="角色名">
                            <Input v-model="addModalModel.name" placeholder="角色名" size="small"></Input>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>

<script>
  import column from './column';
  import _ from 'lodash';
  export default {
    data () {
      return {
        self: this,
        searchKey: '',
        addModal: false,
        tableLoading: false,
        tableData: [],
        tableColumn: column,
        selection: [],
        addModalModel: {
          name: ''
        },
        currentRow: {},
        currentAuth: {page: [], resource: [], data: []},
        test: false
      };
    },
    methods: {
      addSave () {
        this.$http.post('/sys/roles', this.addModalModel)
          .then((res) => {
            this.$Message.info('增加成功');
            this.load();
          })
          .catch((err) => {
            this.$Message.error(err.message);
          });
      },
      addCancel () {
      },
      load () {
        let self = this;
        this.addModal = false;
        this.$http.get('/sys/roles')
          .then(
            (res) => {
              self.tableData = res.data;
              this.pageTotal = self.tableData.length;
            })
          .catch(
            (err) => {
              this.$Message.error(err.message);
            });
      },
      loadAuth (roleId) {
        let self = this;
        this.$http.get('/sys/roles/' + this.currentRow.roleId + '/auth')
          .then(
            (res) => {
              self.currentAuth = res.data;
              this.$Message.destroy();
            })
          .catch(
            (err) => {
              this.$Message.destroy();
              this.$Message.error(err.message);
            });
      },
      tableCurrentChange (cr, or) {
        this.currentRow = cr;
        this.$Message.loading({content: '加载角色[' + cr.roleName + ']权限信息', duration: 0, top: 200});
        this.loadAuth(cr.roleId);
      },
      deleteRole () {
        this.$Modal.confirm({
          title: '确认删除',
          content: '是否删除当前角色',
          onOk: () => {
          }
        });
      },
      saveRole () {
        this.$Modal.confirm({
          title: '确认保存',
          content: '是否保存当前角色权限配置',
          onOk: () => {
            this.$Message.loading({content: '保存角色[' + this.currentRow.roleName + ']权限信息', duration: 0, top: 200});
            this.$http.post('/sys/roles/' + this.currentRow.roleId + '/auth', this.currentAuth)
              .then(
                (res) => {
                  this.$Message.destroy();
                })
              .catch(
                (err) => {
                  this.$Message.destroy();
                  this.$Message.error(err.message);
                });
          }
        });
      }
    },
    components: {},
    computed: {
      tableHeight () {
        return this.$store.state.app.pageAreaHeight - 115;
      }
    },
    watch: {},
    mounted () {
      this.load();
    }
  };
</script>
